@use '../../../styles/mixins';
@use '../variables';

$block: '.#{variables.$ns}user';

#{$block} {
    --_--avatar-offset: var(--g-spacing-2);
    --_--name-font-weight: var(--g-text-body-font-weight);
    --_--name-font-size: var(--g-text-body-short-font-size);
    --_--name-line-height: var(--g-text-body-short-line-height);
    --_--description-font-weight: var(--g-text-body-font-weight);
    --_--description-font-size: var(--g-text-body-short-font-size);
    --_--description-line-height: var(--g-text-body-short-line-height);

    display: flex;
    align-items: center;
    gap: var(--g-user-avatar-offset, var(--_--avatar-offset));

    &_size {
        &_3xs,
        &_2xs,
        &_xs,
        &_s {
            --_--avatar-offset: calc(var(--g-spacing-base) * 1.5);
        }

        &_m {
            --_--avatar-offset: var(--g-spacing-2);
        }

        &_l,
        &_xl {
            --_--avatar-offset: var(--g-spacing-3);
        }

        &_3xs,
        &_2xs,
        &_xs,
        &_s,
        &_m,
        &_l {
            --_--name-font-size: var(--g-text-body-short-font-size);
            --_--name-line-height: var(--g-text-body-short-line-height);
        }

        &_xl {
            --_--name-font-size: var(--g-text-body-2-font-size);
            --_--name-line-height: var(--g-text-body-2-line-height);
        }
    }

    &__avatar {
        display: flex;
        align-items: center;
    }

    &__info {
        flex: auto;
        display: flex;
        flex-direction: column;
        min-width: 0;

        #{$block}__name {
            @include mixins.overflow-ellipsis();

            color: var(--g-color-text-primary);
            font-weight: var(--g-user-name-font-weight, var(--_--name-font-weight));
            font-size: var(--g-user-name-font-size, var(--_--name-font-size));
            line-height: var(--g-user-name-line-height, var(--_--name-line-height));
        }

        #{$block}__description {
            @include mixins.overflow-ellipsis();

            color: var(--g-color-text-secondary);
            font-weight: var(--g-user-description-font-weight, var(--_--description-font-weight));
            font-size: var(--g-user-description-font-size, var(--_--description-font-size));
            line-height: var(--g-user-description-line-height, var(--_--description-line-height));
        }
    }
}
